<template>
    <el-dialog title="字段映射" v-model="visible" width="600px">
        <el-form :model="ruleForm" :rules="rules" ref="formRef" label-width="80px">


<el-row>
                <el-col :span="9">
                    <el-form-item label="DB类型">
                        <el-input placeholder="例：varchar"  v-model="tableField"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="代码类型">
                       <el-input placeholder="例：string"  v-model="codeField"></el-input>
                       
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item >
                       <el-button type="primary" @click="submitForm">添加</el-button>
                    </el-form-item>
                </el-col>
            </el-row>


          
        </el-form>
        <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" :stripe="stripe"
            tooltip-effect="dark" ref="multipleTable" style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="tableField" label="DB数据类型">
            </el-table-column>
            <el-table-column prop="codeField" label="代码数据类型">
            </el-table-column>

             <el-table-column
        label="操作"
        width="220"
      >
        <template #default="scope">
         
          <el-popconfirm
            title="确定删除吗？"
            @confirm="handleDeleteOne(scope.row.id)"
          >
            <template #reference>
              <a style="cursor: pointer">删除</a>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>

        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15, 20]"
            :page-size="pagesize" layout="  prev, pager, next" :total="total">
        </el-pagination>
      
    </el-dialog>
</template>

<script lang="ts">
       import * as db_context from '@/models/db_context'
    import {
        reactive,
        ref,
        toRefs
    } from 'vue'

    import {
        ElMessage
    } from 'element-plus'

    export default {
        name: 'DialogAddDb',
        props: {
            type: String, // 用于判断是添加还是编辑
            reload: Function // 添加或修改完后，刷新列表页
        },
        setup(props: any) {
            const formRef = ref < any > (null)
            const state = reactive({
                visible: false,
                tId: "0",
                isTest:0,
                codeId: '',
                stripe: true, //是否为斑马纹 table
                tableData: [],
                currentPage: 1,
                pagesize: 10,
                total: 0,
                dbname: "",
                options: [],
                db:{},
                codeField:"",
                tableField:""
            })

            const multipleTable = ref(null)
            

            // 获取详情
            const getDetail = async (codeId: string) => {

                 const option={
                   codeId:codeId
                 }
               state.tableData= await db_context.GenCodeMapping.getListByOption(option);
               state.total=state.tableData.length;
                console.log(codeId);
                state.codeId = codeId;
               
            }
            
            // 开启弹窗
            const open = (codeId: string) => {
                state.visible = true
                if (codeId) {
                    state.codeId = codeId
                    // 如果是有 id 传入，证明是修改模式
                    getDetail(codeId)
                } 
            }
            // 触发过滤项方法
            const handleOption = () => {
                console.log('gggggggggg')
            }
     

   // 单个删除
    const handleDeleteOne = async (id:string) => {
        await db_context.GenCodeMapping.deleteById(Number.parseInt(id));
        
          ElMessage.success('删除成功');
          getDetail(state.codeId);
    
    }
            // 关闭弹窗
            const close = () => {
                state.visible = false
            }
            const submitForm = async () => {
                if(state.codeField==""||state.tableField==""){
                  ElMessage.error('请填完整');
                   return;
                }
                const item:any={
                    codeId:state.codeId,
                    tableField:state.tableField,
                    codeField:state.codeField

                }
               await db_context.GenCodeMapping.createItem(item)
                ElMessage.success('添加成功');
                 getDetail(state.codeId);

                 state.tableField="";
                 state.codeField="";

              
            }
            return {
                ...toRefs(state),
                open,
                close,
                formRef,
                handleOption,
                submitForm,
                multipleTable,
                handleDeleteOne
            }
        }
    }
</script>